<template>
  <div class="block">
    <div class="system-menu-container layout-padding mt-5">
      <el-card shadow="hover" class="layout-padding-auto">
        <div class="system-menu-search">
          <el-button size="small" type="primary" @click="clickExpand">
            <el-icon><ele-Sort /></el-icon>
            {{ expand.state ? '全部关闭' : '全部展开' }}
          </el-button>
          <el-button
            size="small"
            type="success"
            class="ml10"
            @click="onCURD({ type: curdEnum.INSERT, ids: '1' })"
          >
            <el-icon>
              <ele-DocumentAdd />
            </el-icon>
            新增菜单
          </el-button>
        </div>
        <el-table
          :data="state.tableData.data"
          v-loading="state.tableData.loading"
          style="width: 100%"
          row-key="id"
          :key="expand.key"
          :default-expand-all="expand.state"
          :expand-row-keys="expandArr"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column label="菜单名称" width="250" show-overflow-tooltip>
            <template #default="scope">
              <SvgIcon :name="scope.row.icon" />
              <span class="ml10">{{ $t(scope.row.name) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="类型" width="100" show-overflow-tooltip>
            <template #default="scope">
              <el-tag
                size="small"
                v-if="scope.row.type == 1 && scope.row.parentId != 1"
                :type="scope.row.parentId == 0 ? 'danger' : 'primary'"
                effect="dark"
              >
                {{ scope.row.parentId == 0 ? '顶级' : '页面' }}
              </el-tag>
              <el-tag
                size="small"
                v-if="scope.row.type == 1 && scope.row.parentId == 1"
                type="success"
                effect="dark"
              >
                菜单
              </el-tag>
              <el-tag size="small" v-if="scope.row.type == 2" type="warning" effect="dark">
                按钮
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="path"
            label="路由路径"
            width="180"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="组件路径" show-overflow-tooltip>
            <template #default="scope">
              <span v-if="scope.row.type == 1 && scope.row.component.length > 0">
                <el-tag type="warning" size="small">/@/views/</el-tag>
                <el-tag size="small">{{ scope.row.component }}</el-tag>
                <el-tag type="warning" size="small">.vue</el-tag>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="状态" show-overflow-tooltip width="80">
            <template #default="scope">
              <el-tag :type="scope.row.visible == -1 ? 'success' : 'danger'" size="small">
                {{ scope.row.visible == -1 ? '显示' : '隐藏' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="快捷菜单" show-overflow-tooltip width="100">
            <template #default="scope">
              <el-tag :type="scope.row.isFast == 1 ? 'success' : 'danger'" size="small">
                {{ scope.row.isFast == 1 ? '是' : '否' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="排序" show-overflow-tooltip width="80">
            <template #default="scope">
              {{ scope.row.sort }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" show-overflow-tooltip width="110">
            <template #default="scope">
              <el-tooltip placement="top" :content="$t('message.form.insertSon')">
                <el-icon
                  class="mr10"
                  color="blue"
                  v-auth="'system:function:insert'"
                  @click="onCURD({ type: curdEnum.INSERT, ids: scope.row.id })"
                >
                  <ele-FolderAdd />
                </el-icon>
              </el-tooltip>
              <el-tooltip placement="top" :content="$t('message.form.edit')">
                <el-icon
                  class="mr10"
                  color="blue"
                  v-auths="['system:function:query', 'system:function:edit']"
                  @click="onCURD({ type: curdEnum.EDIT, ids: scope.row.id })"
                >
                  <ele-Edit />
                </el-icon>
              </el-tooltip>
              <el-tooltip
                v-if="scope.row.parentId != 0"
                placement="top"
                :content="$t('message.form.delete')"
              >
                <el-icon
                  class="mr10"
                  color="blue"
                  v-auth="'system:function:delete'"
                  @click="onCURD({ type: curdEnum.DELETE, ids: scope.row.id })"
                >
                  <ele-Delete />
                </el-icon>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <MenuDialog ref="menuDialogRef" @refresh="formSubmit" />
    </div>
  </div>
</template>

<script setup lang="ts" name="systemMenu">
  import { defineAsyncComponent, ref, onMounted, reactive } from 'vue';
  import { RouteRecordRaw } from 'vue-router';
  import { ElMessageBox, ElMessage } from 'element-plus';
  import { useMenuApi } from '/@/views/system/menu';
  import { isEmpty, tansParams } from '/@/utils/mms';
  import { CURDEnum } from '/@/enums/CURDEnum';
  import { NextLoading } from '/@/utils/loading';
  // 引入组件
  const MenuDialog = defineAsyncComponent(() => import('/@/views/system/menu/dialog.vue'));
  // 引入 api 请求接口
  const baseApi = useMenuApi();
  const curdEnum = CURDEnum;
  // 定义变量内容
  // 展开/合闭
  const expand = ref({
    state: false,
    key: 0,
  });
  // 默认展开行
  let expandArr = ref<string[]>([]);
  const menuDialogRef = ref();
  const state = reactive({
    tableData: {
      data: [] as RouteRecordRaw[],
      loading: true,
    },
  });

  // 接受子组件传值
  const formSubmit = (row: FunctionType) => {
    if (isEmpty(row.id)) {
      //新增
      NextLoading.open();
      baseApi
        .insert(row)
        .then((row) => {
          menuDialogRef.value.closeDialog();
          ElMessage.success(row.msg);
          setTimeout(() => {
            getTableData();
          }, 1000);
        })
        .catch(async (err) => {
          menuDialogRef.value.resetLoading();
          ElMessage.warning(err);
        })
        .finally(() => {
          NextLoading.close();
        });
    } else {
      //更新
      NextLoading.open();
      baseApi
        .edit(row)
        .then((row) => {
          menuDialogRef.value.closeDialog();
          ElMessage.success(row.msg);
          setTimeout(() => {
            getTableData();
          }, 1000);
        })
        .catch(async (err) => {
          menuDialogRef.value.resetLoading();
          ElMessage.warning(err);
        })
        .finally(() => {
          NextLoading.close();
        });
    }
  };

  // 展开或折叠全部的方法
  const clickExpand = () => {
    expand.value.key = +new Date();
    expand.value.state = !expand.value.state;
  };

  // 初始化表格数据
  const getTableData = () => {
    state.tableData.loading = true;
    baseApi.list().then((res) => {
      state.tableData.data = res.data;
      state.tableData.loading = false;
      expandArr.value.push(String(1));
    });
  };
  // 打开新增菜单弹窗
  const onCURD = (obj: { type: CURDEnum; ids?: string }) => {
    if (obj.type == CURDEnum.INSERT) {
      baseApi
        .query(obj.ids)
        .then((res) => {
          menuDialogRef.value.openDialog(obj.type, res.data);
        })
        .catch(async (err) => {
          ElMessage.warning(err);
        })
        .finally(() => {});
    }
    if (obj.type == CURDEnum.EDIT) {
      baseApi
        .query(obj.ids)
        .then((res) => {
          menuDialogRef.value.openDialog(obj.type, res.data);
        })
        .catch(async (err) => {
          ElMessage.warning(err);
        })
        .finally(() => {});
    }
    if (obj.type == CURDEnum.DELETE) {
      ElMessageBox.confirm(`此操作将永久删是否继续?`, '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          baseApi
            .delete(obj.ids)
            .then((res) => {
              getTableData();
              ElMessage.success('删除成功');
            })
            .catch(async (err) => {
              ElMessage.warning(err);
            })
            .finally(() => {});
        })
        .catch(() => {});
    }
  };
  // 页面加载时
  onMounted(() => {
    getTableData();
  });
</script>
<style></style>
